<template>
<el-container>
    <el-header>
    <el-select v-model="value" placeholder="请选择查询方式" @change="onChange" v-if="this.isAdmin">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-input v-if="searchType==2" :disabled="this.isAdmin==false" v-model="input" placeholder="请输入身份证号码" class="input"></el-input>
  <el-date-picker 
      v-model="value4"
      type="month"
      value-format="yyyy-MM"
      @change="changeMonth"
      placeholder="选择月份">
    </el-date-picker>
    <el-button type="primary" icon="el-icon-search" @click="searchRes">搜索</el-button>
    </el-header>
    <el-main>
        <TotalTable v-if="TotalTableList.length>0" v-bind:TotalTableList=TotalTableList></TotalTable>
        <span class="errtips" v-if="err">未查询到相关数据，请核对您输入的参数</span>
    </el-main>
    
</el-container>
    
</template>

<script>
    import TotalTable from "./totalTable";
  export default {
      created(){
          if(this.$store.state.userId=="admin"){
              this.isAdmin=true
          }else{
              this.searchType=2
              this.input=this.$store.state.userId
          }
      },
    data() {
      return {
          value4:"",
          isAdmin:false,
        options: [{
          value: '1',
          label: '按月份'
        }, {
          value: '2',
          label: '按身份证号码'
        }],
        value:"",
        input: '',
        searchType:null,
        TotalTableList:[],
        err:false
      }
    },
    components:{
        TotalTable
    },
    methods:{
        onChange(e){
            this.searchType=e
        },
        searchRes(){
            let month=this.$store.state.month
            let userId=this.$store.state.userId
            let headers=this.$store.state.headers
            if(!this.searchType){
                this.$message("请选择查询方式");
                return
            }else if(!month){
                this.$message("请选择查询月份");
                return    
            }else if(this.searchType==1){
                let url="/wages/getWages?sheetNames="+month;
                
                this.axios.get(url,{
                    headers:headers
                }).then(res=>{
                    if(res.data.data.wagesInfoVoList.length<1){
                        this.err=true
                    }else{
                        this.err=false
                    }
                    this.TotalTableList=res.data.data.wagesInfoVoList
                },err=>{
                    console.log(err)
                })
            }else{
                if (!this.input) {
                    this.$message("请输入身份证码号")
                    return
                }else{
                    let formData=new FormData()
                    if(this.isAdmin){
                        formData.append("personNumber",this.input)
                    }else{
                        formData.append("personNumber",userId)
                    }
                
                formData.append("sheetName[]",month)
                let url="/wages/getWagesByNumber"
                this.axios.post(url,formData,{
                    headers:headers
                }).then(res=>{
                    if(res.data.data.wagesInfoVoList.length<1){
                        this.err=true
                    }else{
                        this.err=false
                        
                    }
                    this.TotalTableList=res.data.data.wagesInfoVoList
                },err=>{
                    this.$message(err.data.msg)
                })
                }
                
            }
            
            
            
        },
        changeMonth(val){
            this.$store.commit("changeMonth",val)
        }

    }
  }
</script>

<style>
    .main{
        width: 100%
    }
    .errtips{
        font-weight: 400;
        color: #1f2f3d;
        font-size: 18px
    }
    .input{
        display: inline-block;
        width: 20%
    }
</style>

